import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

// 导入动画库
import gsap from "gsap";

// 目标：js控制画面全屏

//创建场景
const scene = new THREE.Scene();

//创建相机，设置相机在场景中的位置，并加入场(fnrt)景.
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 10;//camera.position.set(0,0,10);
scene.add(camera);

//创建物体（包括几何体和材质)，把物体加入场景中
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);

//控制物体缩放
cube.scale.set(3, 2, 1);
//控制物体旋转
cube.rotation.set(Math.PI / 4, 0, 0, "XYZ");


//创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);


// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();
// 设置动画
// var animate1 = gsap.to(cube.position, {
//   x: 5,
//   duration: 5,
//   ease: "power1.inOut",
//   //   设置重复的次数，无限次循环-1
//   repeat: -1,
//   //   往返运动
//   yoyo: true,
//   //   delay，延迟2秒运动
//   delay: 2,
//   onComplete: () => {
//     console.log("动画完成");
//   },
//   onStart: () => {
//     console.log("动画开始");
//   },
// });
// gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5, ease: "power1.inOut" });

//如果先旋转，转完成了再移动，可以如下操作;
const tl = gsap.timeline();
tl.to(cube.rotation, { x: 2 * Math.PI, duration: 5, ease: "power1.inOut" })
  .to(cube.position, {
    x: 5,
    duration: 5,
    ease: "power1.inOut",
    //   设置重复的次数，无限次循环-1
    repeat: -1,
    //   往返运动
    yoyo: true,
    //   delay，延迟2秒运动
    // delay: 2,
    onComplete: () => {
      console.log("动画完成");
    },
    onStart: () => {
      console.log("动画开始");
    },
  });

  window.addEventListener("dblclick", () => {
    const fullScreenElement = document.fullscreenElement;
    if (!fullScreenElement) {
      //   双击控制屏幕进入全屏，退出全屏
      // 让画布对象全屏
      renderer.domElement.requestFullscreen();
    } else {
      //   退出全屏，使用document对象
      document.exitFullscreen();
    }
    //   console.log(fullScreenElement);
  });



function render() {
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

//安装gsap  https://gsap.com/
//pnpm add gsap

// npm install gsap

//yarn add gsap

// Common methods for creating a Tween:
// gsap.to()
// gsap.from()
// gsap.fromTo()


// var tl = gsap.timeline({delay: 2});
// //sequenced one-after-the-other
// tl.to(".box1", {duration: 2, rotation: -360})
//   .to(".box2", {duration: 1, x: -100, ease: 'elastic.out'})
//   .to(".box3", {duration: 2, rotation: 360, x: 100, ease: 'expo.out'});

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  // 这里是一个箭头函数，会在窗口尺寸改变时被调用。
  
  // 更新摄像头的宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 这一行代码设置摄像头的宽高比（aspect ratio），即宽度除以高度。
  // 摄像头的宽高比需要随着窗口尺寸的变化而变化，以保证场景的正确渲染。

  // 更新摄像机的投影矩阵
  camera.updateProjectionMatrix();
  // 当摄像头的某些属性发生改变时（如这里的宽高比），需要更新投影矩阵。
  // 投影矩阵决定了物体如何从三维空间映射到二维屏幕上。

  // 更新渲染器的尺寸
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 设置渲染器的尺寸为新的窗口尺寸，以匹配窗口的大小。
  // 这样可以确保渲染的内容能够完全填充整个窗口。

  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
  // 这一行设置渲染器的像素比（pixel ratio），通常称为设备像素比。
  // 设备像素比是指物理像素与CSS像素的比例，在高分辨率显示器（如Retina屏幕）上，这个值会大于1。
  // 设置此比例可以提高渲染质量，确保在高分辨率屏幕上也能获得清晰的图像。
});